<template>
    <div>
        <page-main>
            <!-- 批量操作 -->
            <div style="margin-bottom: 20px;">
                <el-button type="primary" size="small" @click="add(null)">新建</el-button>
            </div>
            <!-- 表格 table -->
            <el-table ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row>
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column prop="name" label="角色名称">
                    <template #default="scope">
                        <span>{{ scope.row.name }} <i v-if="scope.row.type==1" class="el-icon-s-flag" style="color: rgb(245, 108, 108);" /></span>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="角色类型">
                    <template #default="scope">
                        <span>{{ scope.row.type | typeFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" />
                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button type="text" size="small" :disabled="scope.row.type==1" @click="add(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" :disabled="scope.row.type==1" @click="del(scope.row.id)">删除</el-button>
                        <el-button type="text" size="small" :disabled="scope.row.type==1" @click="auth(scope.row)">权限设置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </page-main>
        <!-- 新建角色 -->
        <add-dialog ref="reservationAdd" @success="getList" />
        <!-- 权限设置 -->
        <auth-drawer ref="authSet" />
    </div>
</template>

<script>
import { groupList, delGroup } from '@/api/system'
import AddDialog from './components/AddDialog'
import AuthDrawer from './components/AuthDrawer'
export default {
    name: 'RoleList',
    components: {
        AddDialog,
        AuthDrawer
    },
    filters: {
        typeFilter(val) {
            const map = {
                1: '管理员',
                2: '员工'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            search: {
                pages: 1,
                limit: 10,
                total: 0
            },
            dataList: []
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        // 新建
        add(item) {
            this.$refs.reservationAdd.showDialog(item);
        },
        // 权限设置
        auth(item) {
            this.$refs.authSet.showDrawer(item);
        },
        // 删除
        del(id) {
            this.$alert('确定将选中该员工？', '提示', {
                confirmButtonText: '确定',
                showCancelButton: true,
                callback: action => {
                    if (action == 'confirm') {
                        delGroup({ id }).then(res => {
                            if (res.status) {
                                this.getList();
                                this.$message({ type: 'success', message: '操作成功！'});
                            }
                        })
                    }
                }
            });
        },
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            groupList(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                }
                this.loading = false;
            })
        }
    }
}
</script>
